{{ $_hugo_config := `{ "version": 1 }` }}
{{ $value_image := resources.GetMatch (printf "**%s*" .Params.image) }}

<div class="row justify-content-center core-value {{ if eq .Params.image_position "right" }} flex-row-reverse {{ end }} border-bottom">

  {{ with $value_image }}
  {{ $image_resized_500 := $value_image.Fit "500x250 jpg" }}
  {{ $image_resized_750 := $value_image.Fit "750x375 jpg" }}
  {{ $image_resized_1000 := $value_image.Fit "1000x500 jpg" }}
  {{ $image_resized_1500 := $value_image.Fit "1500x750 jpg" }}
  {{ $image_resized_zoom := $value_image.Fit "3000x1500 jpg" }}
  <div class="col-md text-center mw-100 d-flex flex-column" style="max-width: 80%;">
    <img
      class="mw-100 h-auto align-self-center"
      width="500"
      height="250"
      src="{{ $image_resized_500.RelPermalink }}"
      srcset="{{ $image_resized_500.RelPermalink }},
              {{ $image_resized_750.RelPermalink }} 1.5x,
              {{ $image_resized_1000.RelPermalink }} 2x,
              {{ $image_resized_1500.RelPermalink }} 3x"
      data-zoom-src="{{ $image_resized_zoom.RelPermalink }}"
      data-zoomable
    />
  </div>
  {{ end }}

  <div class="col-md">
    <div class="value-title h2">{{ .Params.title }}</div>
    <p class="value-body">{{ .Inner }}</p>
  </div>
</div>
